<!DOCTYPE html>
<html lang="zh">

<head>
	<!-- 百度统计 -->
	<script>
		var _hmt = _hmt || [];
		(function () {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?e3fd2b8e813e2dd0ad7a24468fe468d4";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>

	<meta charset="UTF-8">
	<title>大西瓜三合一收款码</title>
	<meta name="keywords" content="收款码合并,收款码三合一免费合并,在线合成,合成,免费合成,收款码" />
	<meta name="description" content="qq微信支付宝收款码在线免费合并三合一" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="bookmark" href="favicon.ico" />
	<link rel="stylesheet" href="./layui/css/layui.css">
	<link href="//cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link href="//cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
	<!-- header开始 -->
	<div class="">
		<nav class="navbar navbar-inverse mainColor">
			<div class="container-fluid container">
				<div class="navbar-header header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBar"
						aria-expanded="false">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="../">大西瓜收款码</a>
				</div>

				<div class="collapse navbar-collapse" id="navBar">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="https://www.bwmelon.com/">博客</a></li>
						<li><a href="https://github.com/BWmelon/qrcode">Github</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-haspopup="true" aria-expanded="false">Links <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="https://api.no0a.cn/">大西瓜api</a></li>
								<li><a href="https://www.layui.com/">Layui</a></li>
							</ul>
						</li>
						<li><a href="https://jq.qq.com/?_wv=1027&k=58OjqS7">有问题点我</a></li>
					</ul>

				</div>
			</div>
		</nav>
	</div>
	<!-- header结束 -->

	<!-- content开始 -->
	<div class="container">
		<form class="form-horizontal">

			<div class="form-group">
				<div class="col-sm-8 col-sm-offset-2">
					<input type="text" class="form-control" id="recName" placeholder="收款人名称(建议2~4个字，不填则不生成)"
						autocomplete="off">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-8 col-sm-offset-2">
					<input type="text" class="form-control" id="qqlogo" placeholder="QQ号(不填则使用默认QQ头像)" autocomplete="off">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-8 col-sm-offset-2">
					<div class="input-group">
						<input type="text" class="form-control" id="qq" placeholder="请点按钮上传QQ收款码" autocomplete="off">
						<label class="input-group-btn">
							<span class="btn btn-primary">
								<span class="glyphicon glyphicon-upload"></span>
								上传图片 <input type="file" style="display: none;" id="qqBtn" multiple>
							</span>
						</label>
					</div>
				</div>
			</div>

			<div class="form-group text-center">
				<div class="col-sm-8 col-sm-offset-2">
					<div class="input-group">
						<input type="text" class="form-control" id="wechat" placeholder="请点按钮上传微信收款码"
							autocomplete="off">
						<label class="input-group-btn">
							<span class="btn btn-primary">
								<span class="glyphicon glyphicon-upload"></span>
								上传图片 <input type="file" style="display: none;" id="wechatBtn" multiple>
							</span>
						</label>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-8 col-sm-offset-2">
					<div class="input-group">
						<input type="text" class="form-control" id="ali" placeholder="请点按钮上传支付宝收款码" autocomplete="off">
						<label class="input-group-btn">
							<span class="btn btn-primary">
								<span class="glyphicon glyphicon-upload"></span>
								上传图片 <input type="file" style="display: none;" id="aliBtn" multiple>
							</span>
						</label>
					</div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-12">
					<!-- Swiper -->
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<!-- 淘宝图片，适合带宽较小的服务器，加载速度更快 -->
							<div class="swiper-slide" data-art="longmao" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01Jb4sxE1sjMWWkB2GX_!!2027555802.png)" mould-name="longmao"></div>
							<div class="swiper-slide" data-art="xiaohuangren" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN019MNjbn1sjMWe1zPkK_!!2027555802.png)" mould-name="xiaohuangren"></div>
							<div class="swiper-slide" data-art="qitao" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01vCBhEb1sjMWbLYdfv_!!2027555802.png)" mould-name="qitao"></div>
							<div class="swiper-slide" data-art="qiuzanzhu" style="background-image:url(https://img.alicdn.com/imgextra/i2/2027555802/O1CN01EAhVdL1sjMWe1yXjJ_!!2027555802.png)" mould-name="qiuzanzhu"></div>
							<div class="swiper-slide" data-art="pinkgirl" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01yW0pRP1sjMXDS6gJD_!!2027555802.png)" mould-name="pinkgirl"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i2/2027555802/O1CN0178X3hU1sjMWfmkoh5_!!2027555802.png)" mould-name="dongxue"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i3/2027555802/O1CN01ETL8eZ1sjMWf7GHlX_!!2027555802.png)" mould-name="pikaqiu"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01bFGxSs1sjMWcWW1uR_!!2027555802.png)" mould-name="kanuobudingmao"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i1/2027555802/O1CN01T0g4kQ1sjMWf7HUZP_!!2027555802.png)" mould-name="niannianyouyu"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i3/2027555802/O1CN01ABc7nR1sjMWbLWQRm_!!2027555802.png)" mould-name="baobei"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01mO4EYP1sjMWeSZtzX_!!2027555802.png)" mould-name="toushi"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01LDfMYs1sjMWhTHmPR_!!2027555802.png)" mould-name="gongzhu"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01Yuipi71sjMWhTI32u_!!2027555802.png)" mould-name="huanyingdashang"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01DU5ECy1sjMWe205L5_!!2027555802.png)" mould-name="yinlian"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN01B4y11v1sjMWeSGuWy_!!2027555802.png)" mould-name="yitiji"></div>
							<div class="swiper-slide" style="background-image:url(https://img.alicdn.com/imgextra/i4/2027555802/O1CN017OCNEy1sjMWfe9Z3U_!!2027555802.png)" mould-name="maomi"></div>
							
							
							<!-- 引用本地图片，适合图片cdn或者带宽较大的服务器 -->
							<!-- <div class="swiper-slide" data-art="longmao" style="background-image:url(imgs/bgimgs/longmao.png)"></div>
							<div class="swiper-slide" data-art="xiaohuangren" style="background-image:url(imgs/bgimgs/xiaohuangren.png)"></div>
							<div class="swiper-slide" data-art="qitao" style="background-image:url(imgs/bgimgs/qitao.png)"></div>
							<div class="swiper-slide" data-art="qiuzanzhu" style="background-image:url(imgs/bgimgs/qiuzanzhu.png)"></div>
							<div class="swiper-slide" data-art="pinkgirl" style="background-image:url(imgs/bgimgs/pinkgirl.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/dongxue.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/pikaqiu.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/kanuobudingmao.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/niannianyouyu.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/baobei.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/toushi.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/gongzhu.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/huanyingdashang.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/yinlian.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/yitiji.png)"></div>
							<div class="swiper-slide" style="background-image:url(imgs/bgimgs/maomi.png)"></div> -->
						</div>

						<!-- Add Pagination 分页器 无需显示可注释掉 -->
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
			
			<div style="display: none;">
				<img src=" ./imgs/bgimgs/longmao.png" alt="">
				<img src="./imgs/bgimgs/xiaohuangren.png" alt="">
				<img src="./imgs/bgimgs/qitao.png" alt="">
				<img src="./imgs/bgimgs/qiuzanzhu.png" alt="">
				<img src="./imgs/bgimgs/pinkgirl.png" alt="">
			</div>

			<div class="form-group">
				<div class="col-xs-12 col-sm-2 col-sm-offset-5">
					<input type="button" class="btn btn-primary btn-block" id="make" value="立即合成">
				</div>
			</div>

			<div class="row col-xs-10 col-sm-4 col-md-4 col-lg-4 col-xs-offset-1 col-md-offset-4 col-lg-offset-4">
				<div id="code"></div>
				<canvas id="canvas"></canvas>
				
				<img class="img-responsive center-block" alt="收款码" id="endImg"/>
				<div class="img-responsive center-block" id="qrcode"></div>
			</div>

			<!-- 保存按钮 -->
			<div class="form-group">
				<div class="col-sm-offset-5 col-xs-12 col-sm-2 col-md-2 col-lg-2">
					<input type="button" class="btn btn-primary btn-block" id="downImg" value="保存不了？点我试试">
				</div>
			</div>
		</form>
	</div>
	<!-- content结束 -->

	<!-- footer开始 -->
	<footer class="footer navbar-fixed-bottom mainColor">
		<div class="">
			<p class="text-center footer-text">CopyRight © 2019 |
				<a href="https://www.bwmelon.com" target="_blank" class="link">大西瓜博客 </a>
				<a href="https://console.upyun.com/register/?invite=HJgXwr0lV"><img src="https://imgs.bwmelon.com/20190506153023.png" alt="又拍云免费CDN" width="60px"></a>
				<a href="http://beian.miit.gov.cn/" target="_blank"> 苏ICP备18069696号</a>
			</p>

		</div>
	</footer>
	<!-- footer结束 -->
	<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="//cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
	<script src="./js/jquery.qrcode.min.js"></script>
	<script src="./js/analyticCode.js"></script>
	<script src="./js/artqrcode.js"></script>
	<script src="./js/llqrcode.js"></script>
	<script src="./js/qrcode.js"></script>
	<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/index.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>